<template>
<div class="uploadCode">
	<input accept="image/*" @change="fileChange($event)" ref="pathClear" type="file" id="upload_file" multiple style="display: none" />
	<div class="add">
		<div class="add-image" @click="chooseType">
			<i class="el-icon-erp-tupianshangchuan"></i>
			<p class="font13">上传身份证正面照</p>			
		</div>
		<div class="addImg" v-show="isShow">
		  <p class="delImg"  @click.stop="delImg" >x</p>
	      <img :src="ImgUrl">
	 </div>
	 <div class="loading" v-show="isLoadingShow">
	 	 <p>正在上传,请稍候</p>
		 <mt-spinner type="fading-circle" color="#ffffff"></mt-spinner>
	 </div>
	</div>
</div>
</template>

<script>
export default {
	name:'uploadCode',
	props:{
		/*shopImg:{
			type:String,
			default:''
		}*/
	},
	data () {
		return {
			ImgUrl:'',
			isShow:false,
			isLoadingShow:false,
			imgData:{accept: 'image/jpeg, image/png, image/jpg'},
		}
	},
	created () {
		
	},
	mounted () {
	},
	 methods: {
            chooseType() {
                document.getElementById('upload_file').click();
            },
            fileChange(e) {
                  let _this = this
			      let file = e.target.files[0]
			      let reader = new FileReader();   //html5读文件
				  reader.readAsDataURL(file); //转BASE64    
				  reader.onload=function(e) { //读取完毕后调用接口
				  	_this.isShow = true
				   _this.ImgUrl = e.target.result
				 
				  }
			      //this.ImgUrl = file.name
			      let type = file.type;
			      //判断是否为图片
			      if (this.imgData.accept.indexOf(type) === -1) {  
			       	this.$toast('您上传的图片格式不正确!');
			        return false;  
			      }  			      
			      //格式化
			      let param = new FormData()  
			      param.append('file', file, file.name)  
			      param.append('chunk', '0') 
			      let config = {
			          headers: {'Content-Type': 'multipart/form-data'},				     
			  }
			      this.isLoadingShow = true
		         this.$http.post(this.$store.state.reqUrl + '/user/member/idCard', param, config)
			        .then(res => {
			        	this.isLoadingShow = false
			          /*  this.ImgUrl = res.data	*/	            
			            this.isShow = true
			            this.$emit('imgUrl',this.ImgUrl)
			        }).catch(res => {
			        	this.isLoadingShow = false
			        	this.isShow = false
			        	this.$toast(res.response.data)
			        	this.ImgUrl = ""
			        })
            },
            //删除图片
		 delImg () {
	         this.$refs. pathClear.value =''
		 	 this.ImgUrl = ''
		 	 this.isShow = false
		 	 this.$emit('imgUrl',this.ImgUrl)
		  },
     },
  /* watch: {
   	 shopImg (value) {
   	 	if(value != null || value != "") {
			console.log(value)
			this.ImgUrl = this.shopImg
			this.isShow = true
		}
   	 }
   }*/
}
</script>

<style lang="less">
   .uploadCode{
   	width:100%;
   	margin-top: 60px;
   	 .add{
   	 	width:95%;
   	 	border:1px solid darkgreen;
   	 	height: 450px;
   	 	margin:0 auto;   	 	
   	 	position:relative;
   	 	.add-image {
   	 		width:85%;
   	 		height: 85%;
   	 		background-size: cover;
   	 		margin:35px auto;
   	 		justify-content: center; 
            align-items: center;
            display: -webkit-flex;
	        i {
	           width:200px;
               font-size: 54px;
               color: gray;
               text-align: right;
               margin-right: 30px;
           } 
           p{
           	  flex: 1;
           	  text-align: left;
           	  font-size: 34px;
           	  color: darkgreen;
           }
         }
   	  }
   	  .addImg{
        position: absolute;
        width:85%;
        height: 85%;
        top:35px;
        left: 53px;
        z-index: 88;
            img{
            	height: 100%;
            	height: 100%;
              }
              .delImg{
              	position: absolute;
              	top: -30px;
              	right: -10px;
              	width:60px;
              	height: 60px;
              	border-radius: 100%;
              	background: #F0F0F0;
              	text-align: center;
              	line-height: 62px;
              	font-size: 38px;
              }   	
   	       }
   	       .loading{  	       	
   	       	  position: absolute;
   	       	  z-index: 88;
   	       	  width:100%;
   	       	  height: 100%;
   	       	  background: rgba(0,0,0,0.6);
   	       	  top:0;
   	       	  left: 0;  	       	
   	       	  /*flex-direction: column;
   	       	  display: flex;*/
   	       	  p{
   	       	  	/*flex: 1;*/
   	       	    align-items: flex-end ;
   	       	  	font-size: 32px;
   	       	  	color: #FFFFFF;
   	       	  	text-align: center;
   	       	  	margin-top: 12%;
   	       	  	margin-bottom: 30px;
   	       	  }   	       	  	
   	       }
   }   
</style>